<template>
  <div class="search-list">
    <header-bar title="收文查询"></header-bar>
    <content-scroll class="content" ref="scroll">
      <ul v-show="!loading">
        <list-item v-for="(item, index) in searchList" :key="index" :title="item.title">
          <div>下发人: {{item.author}}</div>
          <div>{{item.date}}</div>
        </list-item>
      </ul>
      <spinner v-if="loading" type="ripple" size='40px' class="spinner"></spinner>
    </content-scroll>
  </div>
</template>

<script>
  import ContentScroll from '@/components/ContentScroll'
  import HeaderBar from '@/components/HeaderBar'
  import ListItem from '@/components/ListItem'
  import {Spinner} from 'vux'

  export default{
    components: {
      ContentScroll,
      HeaderBar,
      ListItem,
      Spinner
    },
    data(){
      const searchList = []
      for(let i = 0;i<10;i++){
        searchList.push({
          title: '2017年12月份工资审批',
          author: '赵俊萍',
          date: '2017-3-21'
        })
      }
      return {
        searchList,
        loading: true
      }
    },
    created(){
      setTimeout(() => {
        this.loading = false;
        this.$nextTick(()=>{
          this.$refs.scroll.refresh()
        })
      }, 3000)
    }
  }
</script>

<style lang="less" scoped>
  .spinner{
    position: fixed;
    top: calc(~'50% - 20px');
    left: calc(~'50% - 20px');
    display: flex;
  }
  
</style>
